{#if props}
  <VirtualListItem {component}
                   {offset}
                   {props}
                   {key}
                   {index}
  />
{/if}
<script>
  import VirtualListItem from './VirtualListItem.html'
  import { mark, stop } from '../../_utils/marks.js'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask.js'
  import { createPriorityQueue } from '../../_utils/createPriorityQueue.js'
  import { isMobile } from '../../_utils/userAgent/isMobile.js'
  import { store } from '../../_store/store.js'

  // In Svelte's implementation of lists, these VirtualListLazyItems can be
  // created in any order. By default in fact it seems to do it in reverse
  // order, which we don't really want, because then items render in a janky
  // way, with the last ones first and then replaced by the first ones,
  // resulting in a UI that looks like a deck of cards being shuffled.
  // This functions waits a microtask and then ensures that the callbacks
  // are called by index, in ascending order.
  const priorityQueue = createPriorityQueue()

  export default {
    oncreate () {
      const { makeProps, key, index } = this.get()
      const { reduceMotion } = this.store.get()
      if (makeProps) {
        // TODO: I would use async/await here, but Firefox 68 for Android has a bug where
        // these don't resolve in the proper order unless I use promises
        priorityQueue(index).then(async () => {
          const props = await makeProps(key)
          const setProps = () => {
            mark('VirtualListLazyItem set props')
            this.set({ props })
            stop('VirtualListLazyItem set props')
          }
          // On desktop, if prefers-reduced-motion is enabled, avoid using scheduleIdleTask
          // here because it causes the scrollbar to grow in a way that may sicken
          // people with vestibular disorders.
          // TODO: someday we can use isInputPending as a better way to break up work
          // https://www.chromestatus.com/feature/5719830432841728
          if (!isMobile() && reduceMotion) {
            setProps()
          } else {
            scheduleIdleTask(setProps)
          }
        })
      }
    },
    data: () => ({
      props: undefined
    }),
    store: () => store,
    components: {
      VirtualListItem
    }
  }
</script>
